<template>
  <div class="pro-time-line">
    <n-timeline size="large" v-bind="setting">
      <n-timeline-item
        v-for="item in optionList"
        :key="item.key"
        :color="iconColor[item.type]"
        :iconSize="item.iconSize || 24"
        v-bind="item"
        @click="handleClick(item)"
      >
        <!-- 内容插槽 -->
        <slot
          v-if="slots.content"
          name="content"
          :option="item"
          :iconColor="iconColor"
        />
        <!-- 状态插槽 -->
        <slot
          v-else-if="slots.info && item.type === status.default"
          :name="status.default"
          :option="item"
          :iconColor="iconColor"
        />
        <slot
          v-else-if="slots.info && item.type === status.info"
          :name="status.info"
          :option="item"
          :iconColor="iconColor"
        />
        <slot
          v-else-if="slots.warning && item.type === status.warning"
          :name="status.warning"
          :option="item"
          :iconColor="iconColor"
        />
        <slot
          v-else-if="slots.error && item.type === status.error"
          :name="status.error"
          :option="item"
          :iconColor="iconColor"
        />
        <slot
          v-else-if="slots.success && item.type === status.success"
          :name="status.success"
          :option="item"
          :iconColor="iconColor"
        />
        <!-- 默认内容 不使用插槽 -->
        <n-card
          v-else-if="!slots.content"
          size="medium"
          :style="{ borderColor: iconColor[item.type] }"
          >{{ item.string }}
        </n-card>
        <!-- 图标插槽 -->
        <template #icon v-if="item.iconName">
          <slot
            v-if="slots.icon"
            :name="icon"
            :option="item"
            :iconColor="iconColor"
          />
          <icons
            v-else
            :name="item.iconName"
            :isHoverCursor="false"
            :fill="iconColor[item.type]"
          />
        </template>
        <!-- 底部插槽 -->
        <template #footer v-if="slots.footer">
          <slot name="footer" :option="item" :iconColor="iconColor">
            <span>我是底部</span>
          </slot>
        </template>
        <!-- 头部插槽 -->
        <template #header v-if="slots.header">
          <slot name="header" :option="item" :iconColor="iconColor">
            <span>我是头部</span>
          </slot>
        </template>
      </n-timeline-item>
    </n-timeline>
    <!-- <slot name="content" /> -->
  </div>
</template>

<script lang="ts" setup name="proTimeLine">
import { option, status, iconColor, settingType } from '~/types/timeLine'
import { useSlots } from 'vue'

interface optionProps {
  optionList: Array<option>
  setting: settingType
}

const { optionList } = defineProps<optionProps>()
const emits = defineEmits<{
  (event: 'timeLineItemClick', timeLineItem: option): void
}>()

const slots = useSlots()
// console.log('slots', slots)
/**
 * @description: 抛出时间线节点点击事件
 * @param {option} timeLineItem
 * @return {*}
 */
const handleClick = (timeLineItem) => {
  emits('timeLineItemClick', timeLineItem)
}
</script>

<style lang="less" scoped></style>
